<template>
  <div id="customerDetails" class="customerDetails">
	  <group class="customerGroupDetails">
		  <cell value-align="left">
			  <img slot="icon" width="60" style="display:block;margin-right:5px;border-radius:20px" src="../../../../assets/profile/default_header.svg">
			  <span v-if="age == null" style="font-size: 15px;font-weight: bold;">{{name.substring(0,3)}}</span>
			  <span v-else style="font-size: 15px;font-weight: bold;">{{name.substring(0,3)}}{{age}}</span>
			  <x-button style="padding: 0 8px;float:right; border: solid 0.5px; border-color: gold" mini @click.native="jumpToEdit">编辑</x-button>
			  <x-button style="padding: 0 8px;float:right;margin-right: 5px;margin-top: 0px;border: solid 0.5px; border-color: gold"mini @click.native="newActivity">活动</x-button>
			  <x-button v-if="customerStatus == 0" style="padding: 0 8px;float:right;margin-right: 5px;margin-top: 0px;border: solid 0.5px; border-color: gold"mini @click.native="jumpToAssistance">辅助谈单</x-button>
			  <div>
				  <span v-if="customerStatus == 0" class="tagPoMember">准会员</span>
				  <span v-else-if="customerStatus == 1" class="tagMember">会员</span>
				  <span v-else-if="customerStatus == 2" class="tagObsolete">已丢弃</span>
				  <span v-else-if="customerStatus == 8" class="tagRaw">原始单</span>
				  <span v-if="status == false" class="tagClass">{{ tag }}</span>
			  </div>
			  <div style="margin-top: 10px;font-size: 13px;"><span>{{nickname}}</span></div>
		  </cell>
	  </group>

	  <button-tab class="customerDetailsTab" v-model="index">
		  <button-tab-item :selected="demo === item" v-for="(item, index) in detailList" @click="demo = item" :key="index">{{ item }}</button-tab-item>
	  </button-tab>

    <div v-if="index === 0" >
      <customer-details-home :id="id"></customer-details-home>
    </div>
	  <div v-else-if="index === 1">
		  <customer-details-tracing :id="id"></customer-details-tracing>
	  </div>
    <div v-else-if="index === 2">
      <customer-contract :id="id"></customer-contract>
    </div>
	  <div v-else-if="index === 3">
		  <customer-details-lesson :id="id"></customer-details-lesson>
	  </div>
	  <div v-else-if="index === 4">
		  <customer-details-lesson-feedback :id="id"></customer-details-lesson-feedback>
	  </div>

	  <div v-transfer-dom>
		  <x-dialog v-model="showDialogStyle" class="iAssistDialog">
			  <p class="iAssistDialogTitle">{{iAssistTitle}}<x-icon type="ios-close-outline" style="fill:white;float: right;" @click="closeDialogStyle"></x-icon></p>
			  <div class="img-box" style="height:350px;padding:15px 10px;overflow:scroll;-webkit-overflow-scrolling:touch;">
				  <div class="reception">
					  <group-title> {{ reception }} </group-title>
					  <grid :cols="3" :show-lr-borders="false" :show-vertical-dividers="false">
						  <grid-item v-for="(item,index) in items" v-if="item.type == 'S_LOV_AI_PO_CUS_INTRODUCTION'" @click.native="jumpToPage(item, index)">
							  <span class="grid-center-assist">{{item.value}}</span>
						  </grid-item>
					  </grid>
				  </div>
				  <div class="refusePoints">
					  <group-title> {{ refusePoints }} </group-title>
					  <grid :cols="3" :show-lr-borders="false" :show-vertical-dividers="false">
						  <grid-item v-for="(item,index) in items" v-if="item.type == 'S_LOV_AI_PO_CUS_REFUSE'" @click.native="jumpToPage(item, index)">
							  <span class="grid-center-assist">{{item.value}}</span>
						  </grid-item>
					  </grid>
				  </div>
			  </div>
		  </x-dialog>
	  </div>

	  <div v-transfer-dom>
		  <x-dialog v-model="showDialogStyleContent" class="iAssistDialog">
			  <p class="iAssistDialogTitle">{{curItem.value}}<x-icon type="ios-close-outline" style="fill:white;float: right;" @click="closeDialogStyleContent"></x-icon></p>
			  <div class="img-box" style="height:350px;padding:15px 10px;overflow:scroll;-webkit-overflow-scrolling:touch;">
				  <div class="reception">
					  <span v-html="curItem.value_description"></span>
				  </div>
			  </div>
			  <x-button v-if="!isLastContent" class="btn_confirm_iAssist" style="margin-top: 15px; background: orange;color: white" @click.native="jumpToPage(items[curIndex+1],curIndex + 1)">{{nextTitle}}</x-button>
			  <x-button class="btn_cancel_iAssist" style="background: gray;color: white" @click.native="goNavigator">回导航页</x-button>
		  </x-dialog>
	  </div>

  </div>
</template>

<script>
	import bus from '@/event/eventBus'
	import DateUtil from '../../../../utils/date'
	import NetWorking from '../../../../utils/networking'
  import customerDetailsHome from './customerDetailsHome'
	import customerDetailsTracing from './customerDetailsTracing'
	import customerDetailsLesson from './customerDetailsLesson'
	import customerDetailsLessonFeedback from './customerDetailsLessonFeedback'
  import customerContract from './customerContract'

  import { Group, Cell, ButtonTab, ButtonTabItem, Divider, XButton, Flexbox, FlexboxItem, Grid, GridItem, GroupTitle, XDialog, TransferDom } from 'vux'

  const list = () => ['客户信息', '动态', '合同', '活动', '教学反馈']

  export default {
    name: "customer-details",
    components: {
	    Group,
      Cell,
      ButtonTab,
      ButtonTabItem,
      Divider,
	    XButton,
      customerDetailsHome,
	    customerDetailsTracing,
	    customerContract,
	    customerDetailsLesson,
	    customerDetailsLessonFeedback,
	    Flexbox,
	    FlexboxItem,
	    Grid,
	    GridItem,
	    GroupTitle,
	    XDialog
    },
    data () {
      return {
      	id: this.$route.params.id,
        detailList: list(),
        demo: '详细信息',
        index: 0,
        name: '',
	      nickname: '',
	      age: '',
        item: '',
	      status: 'true',
	      tag: '',
	      mediaRec: '',
	      mediaRecTimeMax: 5,
	      recTime: 0,
	      recordFile: '',
	      customerStatus: 99,
	      type: 'S_LOV_AI_PO_CUS',
	      showDialogStyle: false,
	      showDialogStyleContent: false,
	      iAssistTitle: '咨询辅助谈单指导',
	      curIndex: 0,
	      curItem: '',
	      isLastContent: false,
	      reception: '接待',
	      refusePoints: '抗拒点分析',
	      nextTitle: '',
	      nextItem: '',
	      nextIndex: 0,
	      items: [],

      }
    },
	  beforeRouteLeave(to, from, next){

		  //存储当前页面信息
		  this.$store.commit('CREATE_URL_PARAMS', {name: from.name, params: this.index, id: this.id})
		  next()
	  },
	  watch: {
		  customerStatus: function () {
			  switch (this.customerStatus){
				  case 0:
				  	this.type = 'S_LOV_AI_PO_CUS'
					  break;
				  default:
				  	this.type = 'S_LOV_AI_PO_CUS'
					  break;
			  }
		  }
	  },
	  directives: {
		  TransferDom
	  },
    created: function () {
	    let _this = this
	    bus.$on("setIndex", function (msg) {
		    _this.index = msg
	    })

	    bus.$emit("userDefinedEvent", 1)
	    bus.$emit("barController", 1)
	    bus.$emit("setTopSimpleTitle", '学员详情')

	    this.$store.commit('FETCH_URL_PARAMS')
	    if(this.$store.state.user.urlParamsMap != null && this.$store.state.user.urlParamsMap["customerDetails"] != null){
		    if(this.index == 0 && this.$store.state.user.urlParamsMap["customerDetails"].params != null){
			    this.index = this.$store.state.user.urlParamsMap["customerDetails"].params
		    }
	    	if(this.id == null && this.$store.state.user.urlParamsMap["customerDetails"].id != null){
		    	this.id = this.$store.state.user.urlParamsMap["customerDetails"].id
		    }
	    }

	    var url = 'customers/' + this.id
	    NetWorking.doGet(
		    url,
		    null,
		    null
	    ).then(
	    	response => {
	    		let rs = response.data
			    if(rs.error_code == 0){
	    			_this.customerStatus = rs.customer.status
				    _this.name = rs.customer.name
				    if(rs.customer.nickname == null){
					    _this.nickname = '小名：无'
				    }else{
					    _this.nickname = '小名：' + rs.customer.nickname
				    }

				    if(rs.customer.birthday != null){
					    _this.age = '(' + DateUtil.getAge(rs.customer.birthday) + '岁)'
				    }else{
					    _this.age = null
				    }


				    _this.status = rs.customer.status
				    _this.tag = rs.customer.tag
			    }else{
				    alert(rs.error_message)
			    }
		    }
	    )
    },
    methods: {
	    closeDialogStyleContent: function () {
		    this.showDialogStyleContent = false
		    bus.$emit("userDefinedEvent", 1)
		    bus.$emit("barController", 1)
		    bus.$emit("setTopSimpleTitle", '学员详情')
	    },
	    closeDialogStyle: function () {
		    this.showDialogStyle = false
		    bus.$emit("userDefinedEvent", 1)
		    bus.$emit("barController", 1)
		    bus.$emit("setTopSimpleTitle", '学员详情')
	    },
	    goNavigator: function () {
		    this.curItem = ''
		    this.curIndex = 0
		    this.showDialogStyle = true
		    this.showDialogStyleContent = false
	    },
	    jumpToPage: function (item, index) {
		    if(index == this.items.length - 1){
			    this.isLastContent = true
			    this.curItem = item
			    this.curIndex = index
		    }else{
			    this.isLastContent = false
			    this.curItem = item
			    this.curIndex = index

			    this.nextItem = this.items[index + 1]
			    this.nextIndex = index + 1
			    this.nextTitle = this.nextItem.value
		    }
		    this.showDialogStyle = false
		    this.showDialogStyleContent = true

	    },
	    jumpToAssistance: function () {
		    /*let _this = this

		    var url = 'list_of_value/getListOfValueByType'
		    var urlarr = new Array()
		    urlarr.push(
			    NetWorking.doGet(
				    url,
				    null,
				    {params: {"type": 'S_LOV_AI_PO_CUS_F2F'}}
			    ))

		    urlarr.push(
			    NetWorking.doGet(
				    url,
				    null,
				    {params: {"type": 'S_LOV_AI_PO_CUS_REFUSE'}}
			    ))

		    var callback = function (c1, c2) {
			    _this.items = c1.data.list_of_value
			    let consultantList = c2.data.list_of_value

		    }

		    NetWorking.doAll2(urlarr).then(this.axios.spread(callback))
			    .catch(function (e){
				    console.log(2);
			    });*/

		    let _this = this
		    NetWorking.doGet(
			    'list_of_value/getListOfValueByType',
			    null,
			    {
				    params:{
					    "type": this.type
				    }
			    }
		    ).then(
			    response => {
				    let rs = response.data
				    if(rs.error_code == 0){
					    _this.items = rs.list_of_value
					    bus.$emit("barController", 9)
					    _this.showDialogStyle = true
				    }else{
					    alert("rs.error_message")
				    }
			    }
		    )
	    },
	    jumpToEdit: function () {
		    this.$router.push({name: 'updateCustomer', params: {id: this.id}})
	    },
	    newActivity: function () {
		    this.$router.push({name: 'newActivity', params: {name: this.name, id: this.id}})
	    }
    }
  }
</script>

<style>
	.grid-center-assist {
		display: block;
		text-align: center;
		color: #ffb7ab;
		text-decoration: none;
		font-size: 14px;
	}

	.iAssistDialogTitle {
		padding: 0px 10px;
		font-weight: bold;
		font-size: 23px;
		margin-left: 15px;
	}

	.img-box {
		height: 350px;
		overflow: hidden;
	}
	.vux-close {
		margin-top: 8px;
		margin-bottom: 8px;
	}

	.iAssistDialog > .weui-dialog {
		text-align: left;
		width: 100%;
		height: 100%;
		max-width: initial;
		background: transparent;
		color: white;
	}

	.iAssistDialog > .weui-mask {
		background: rgba(0, 0, 0, 0.8);
	}

	.iAssistGroup {

	}

	.iAssistGroup > .weui-cells {
		background: transparent;
		color: white;
	}

	.iAssistGroup > .weui-cells:before{
		border-top: 0px solid #D9D9D9 !important;
	}

	.iAssistGroup > .weui-cells:after{
		border-bottom: 0px solid #D9D9D9 !important;
	}

	.iAssistCell > .vux-cell-bd > p > .vux-label {
		width: 60px;
	}

	.iAssistCell > .weui-cell__ft{
		text-align: left;
		padding: 15px;
		color: white;
	}

	.customerDetailsTitle > .vux-cell-bd > .vux-label-desc {
		font-size: 13px !important;
	}

	.reception > .weui-cells__title {
		color: white;
		font-size: 20px;
		font-weight: bold;
	}

	.refusePoints > .weui-cells__title {
		color: white;
		font-size: 20px;
		font-weight: bold;
	}

	.tagClass {
		display: inline-block;
		font-size: 13px;
		background: yellowgreen;
		color: white;
		margin-left: 5px;
		padding-left: 5px;
		padding-right: 5px;
		border-radius: 5px;
	}

	.tagRaw {
		display: inline-block;
		font-size: 13px;
		background: #ff0011;
		color: white;
		margin-top: 5px;
		padding-left: 5px;
		padding-right: 5px;
		border-radius: 5px;
	}

	.tagObsolete {
		display: inline-block;
		font-size: 13px;
		background: #abab84;
		color: white;
		margin-top: 5px;
		padding-left: 5px;
		padding-right: 5px;
		border-radius: 5px;
	}

	.tagPoMember {
		display: inline-block;
		font-size: 13px;
		background: #feda13;
		color: white;
		margin-top: 5px;
		padding-left: 5px;
		padding-right: 5px;
		border-radius: 5px;
	}

	.tagMember {
		display: inline-block;
		font-size: 13px;
		background: yellowgreen;
		color: white;
		margin-top: 5px;
		padding-left: 5px;
		padding-right: 5px;
		border-radius: 5px;
	}

  .customerDetails {
    margin-top: 45px;
  }

  .customerDetailsTab{
	  margin-left: 5px;
	  margin-right: 5px;
	  margin-top: 5px;
  }

  .customerGroupDetails > .weui-cells {
	  z-index: 99;
  }

  .customerGroupDetails > .weui-cells:after {
	  border-bottom: none;
  }

  .customerDetailsTab > .vux-button-tab-item {
	  z-index: 99;
  }

  .vux-button-group > a.vux-button-tab-item-first:after{
	  border: 1px solid black !important;
  }

  .vux-button-group > a.vux-button-tab-item-middle:after {
	  border: 1px solid black !important;
  }

  .vux-button-group > a.vux-button-tab-item-last:after {
	  border: 1px solid black !important;
  }

  .vux-button-group > a.vux-button-group-current {
	  background: orange;
  }

</style>
